import { loadMdicMap } from '@/services/BaseLayout';
import { getTenant, getTenantID } from '@/utils';
import {
  Button,
  Card,
  Col,
  Drawer,
  Form,
  Input,
  message,
  Radio,
  Row,
  Select,
} from 'antd';
import { useCallback, useContext, useState } from 'react';
import { useRequest } from 'umi';
import { AnnounceManageAPI } from '../common/type';
import { AnnounceDetailContext } from '../common/UpdateContext';
import pageStyles from '@/common/pageLayout.less';
import { checkIssueService } from '../service';
import ScrollBarLayout from '@/components/ScrollBarLayout';
import { TagSelect } from '@/components/one-ui';

export const DetailCheckDrawer: React.FC<AnnounceManageAPI.IDetailCheckDrawer> = ({
  visible,
  onClose,
}) => {
  const { announceInfo, reloadAnnounceInfo } = useContext(
    AnnounceDetailContext,
  );

  /**
   * 表单 form
   */
  const [checkForm] = Form.useForm();

  /**
   * 是否显示作废类型
   */
  const [showCancelType, setShowCancelType] = useState<boolean>(false);

  /**
   * 审核单选框默认值
   */
  const [radioDefault, setRadioDefault] = useState<any>(1);
  const radioChangeCallback = useCallback(
    (radioKey: any) => {
      setRadioDefault(radioKey);
    },
    [radioDefault],
  );

  /**
   * 接口回调
   * @param res
   */
  const checkIssueCallllback = (res: any) => {
    if (res && res?.msgFlag) {
      message.success(res?.msg);
      reloadAnnounceInfo();
      onClose();
    } else {
      message.error(res?.msg);
    }
  };

  /**
   * 引入接口
   */
  const { checkIssueLoading, checkIssueRun } = checkIssueService(
    checkIssueCallllback,
  );

  /**
   * 提交审核结果
   */
  const submitCheck = () => {
    checkForm?.validateFields()?.then((values: any) => {
      let checkObj: any = announceInfo?.checkList?.filter((itemCheck: any) => {
        return itemCheck?.checkState == 0;
      });
      let checkPayload: any = {
        ...values,
        id: checkObj?.[0]?.id,
        announceState:
          values?.checkState == 1
            ? `${getTenantID()}12021002`
            : values?.checkState == 2
            ? `${getTenantID()}12021003`
            : values?.checkState == 3
            ? `${getTenantID()}12021004`
            : null,
        versionNum: checkObj?.[0]?.versionNum,
      };
      checkIssueRun(checkPayload);
    });
  };

  /**
   * 获取数据字典loadMdicMap
   */
  const loadMdicMapList = useRequest(
    () => {
      return loadMdicMap([`${getTenantID()}1203`]);
    },
    { manual: true },
  );

  /**
   * 是否展示作废类型
   */
  const cancelTypeList = () => {
    loadMdicMapList?.run();
    setShowCancelType(true);
  };

  return (
    <>
      <Drawer
        // visible={visible}
        open={visible}
        title={<div></div>}
        onClose={onClose}
        style={{ position: 'absolute' }}
        placement="bottom"
        getContainer={false}
        height={'65%'}
        headerStyle={{
          padding: '.5rem',
        }}
        bodyStyle={{
          padding: 0,
        }}
        destroyOnClose={true}
        mask={false}
      >
        <Card
          className={pageStyles['page-view']}
          bordered={false}
          bodyStyle={{
            height: '90%',
            padding: '5px 0px',
            overflow: 'hidden',
          }}
        >
          <Row className={'cardBodyRow'}>
            <Col span={24} className={'cardBodyCol'}>
              <ScrollBarLayout
                style={{
                  padding: '0px 10px 5px 0px',
                }}
              >
                <div className={pageStyles['fromView-styles']}>
                  <Form labelAlign="right" form={checkForm}>
                    <Row>
                      <Col span={24}>
                        <Form.Item
                          name="checkState"
                          label="审核结果"
                          rules={[
                            {
                              required: true,
                              message: '请选择审核结果',
                            },
                          ]}
                          initialValue={radioDefault}
                        >
                          <TagSelect
                            onChange={(e: any) => {
                              let text: string = '';
                              if (e == 1) {
                                text = '同意发布';
                                setShowCancelType(false);
                              } else if (e == 2) {
                                text = '审核驳回';
                                setShowCancelType(false);
                              } else if (e == 3) {
                                text = '作废';
                                cancelTypeList();
                              }
                              checkForm?.setFieldsValue({
                                checkResult: text,
                              });
                              radioChangeCallback(e);
                            }}
                          >
                            <TagSelect.Option value={1}>发布</TagSelect.Option>
                            <TagSelect.Option value={2}>驳回</TagSelect.Option>
                            <TagSelect.Option value={3}>作废</TagSelect.Option>
                          </TagSelect>
                        </Form.Item>
                      </Col>
                      {showCancelType && (
                        <Col span={24}>
                          <Form.Item
                            name="cancelType"
                            label="作废类型"
                            rules={[
                              {
                                required: true,
                                message: '请选择作废类型',
                              },
                            ]}
                          >
                            <Select
                              placeholder="请选择作废类型"
                              allowClear
                              loading={loadMdicMapList?.loading}
                            >
                              {loadMdicMapList?.data?.obj?.[
                                `${getTenantID()}1203`
                              ]?.map((item: any) => {
                                return (
                                  <Select.Option
                                    key={item?.id}
                                    value={item?.id}
                                  >
                                    {item?.name}
                                  </Select.Option>
                                );
                              })}
                            </Select>
                          </Form.Item>
                        </Col>
                      )}

                      <Col span={24}>
                        <Form.Item
                          name="checkResult"
                          label="审核意见"
                          initialValue={'审核通过'}
                        >
                          <Input.TextArea
                            placeholder={`请输入审核意见`}
                            showCount
                            maxLength={200}
                            autoSize={{ minRows: 2, maxRows: 4 }}
                          />
                        </Form.Item>
                      </Col>
                    </Row>
                  </Form>
                </div>
              </ScrollBarLayout>
              <div className={'cardBodybtn'}>
                <Button
                  type="primary"
                  onClick={submitCheck}
                  loading={checkIssueLoading}
                >
                  提交
                </Button>
              </div>
            </Col>
          </Row>
        </Card>
      </Drawer>
    </>
  );
};
